<template>
    <div class="register-container">
        <div class="register-card">

            <el-form style="width: 350px;">
                <div style="margin-bottom: 30px;font-size:28px;color: black;font-weight: bold;text-align: center">欢 迎 注
                    册</div>
                <el-form-item prop="username">
                    <el-input size="large" placeholder="请输入账号" prefix-icon="User"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input size="large" type="password" placeholder="请输入密码" prefix-icon="Lock"></el-input>
                </el-form-item>
                <el-form-item prop="confirmPassword">
                    <el-input size="large" type="password" placeholder="请确认密码" prefix-icon="Lock"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button style="width: 100%;" type="primary">注册</el-button>
                </el-form-item>
                <div style="text-align: right">已有账号? 请<a style="color: #0742b1;text-decoration: none"
                        href="/login">登录</a>
                </div>
            </el-form>
        </div>
    </div>
</template>

<style scoped>
.register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url(../assets/registry.jpg);
    overflow: hidden;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.register-card {
    width: 450px;
    height: 460px;
    background-color: antiquewhite;
    /* 半透明 */
    opacity: 0.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>